<!--
* @author wn
* @date 2022/05/17 11:52:23
* @description: 二级分类面包屑组件  v-if 虽然是计算属性数据 但是也有空的时候,此时读数据 会报错
!-->
<template>
	<xtx-bread>
		<xtx-bread-item to="/">首页</xtx-bread-item>
		<xtx-bread-item v-if="category.top" :to="`/category/${category.top.id}`">
			{{ category.top.name }}
		</xtx-bread-item>
		<transition v-if="category.sub" name="fade-right" mode="out-in">
			<xtx-bread-item :key="category.sub.id">
				{{ category.sub.name }}
			</xtx-bread-item>
		</transition>
	</xtx-bread>
</template>
<script>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
	name: 'SubBread',
	// 通过 sub/id   获取 sub  category
	// category:{top:{id,name},sub:{id,name}}
	setup() {
		const store = useStore()
		const route = useRoute()
		const category = computed(() => {
			const cate = {}
			store.state.category.list.forEach(top => {
				if (top.children) {
					const sub = top.children.find(sub => sub.id === route.params.id)
					if (sub) {
						cate.top = { id: top.id, name: top.name }
						cate.sub = { id: sub.id, name: sub.name }
					}
				}
			})
			return cate
		})
		return { category }
	},
}
</script>
<style scoped lang="less"></style>
